<script setup lang="ts">
import CommentItem from "@/components/plant/CommentItem.vue"
import type { HeadlineInfoType,CommentItemType } from "@/type/lidare"
import { useRouter, useRoute } from "vue-router"
import { ref, reactive, watch, onActivated, onMounted } from "vue"
import { getHeadlineDetail_l,getHeadlineComment_l } from "@/api/lidare"
const router = useRouter();
const routes = useRoute();
const id = ref("0");
const headlineInfo = ref<HeadlineInfoType>({} as HeadlineInfoType);
const commentList = ref<Array<CommentItemType>>();
onActivated(async () => {
  console.log(routes.params.id);
  id.value = routes.params.id as string;
  let res = await getHeadlineDetail_l(id.value);
  // console.log(res);
  headlineInfo.value = res.data._data;
  // console.log(headlineInfo);
  let commentData = await getHeadlineComment_l(id.value);
  commentList.value = commentData.data._data.findCommentList;
  console.log(commentList.value);
});
</script>
<template>
  <div class="fixed-zbest headline-detail">
    <header class="header">
      <van-icon class="header-icon" name="arrow-left" @click.stop="router.go(-1)" />
      <div class="header-text">头条详情</div>
    </header>
    <div class="content">
      <div class="title">{{ headlineInfo.title }}</div>
      <div class="user-info">
        <div class="img-box">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35px" height="35px">
            <image x="0px" y="0px" width="35px" height="35px"
              xlink:href="data:img/png;base64,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" />
          </svg>
        </div>
        <div class="author">{{ headlineInfo.author }}</div>
        <div class="time">{{ headlineInfo.tranTime }}</div>
      </div>
      <div v-html="headlineInfo.content"></div>
      <div class="statistics-count">
        <div class="left">
          <div class="like-count"><van-icon class="icon" name="like-o" /><span>{{ headlineInfo.likeNum }}</span></div>
          <div class="comment-count"><van-icon class="icon" name="chat-o" /><span>{{ headlineInfo.commentCount }}</span>
          </div>
        </div>
        <div class="right"><van-icon class="icon" name="share-o" /></div>
      </div>
      <div class="comment">
        <div class="comment-title">全部评论</div>
        <CommentItem v-for="(item,index) in commentList" :key="index" :item="item"/>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.headline-detail {
  width: 100%;
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    font-size: .2rem;
    line-height: .5rem;
    padding: 0 .15rem;
    display: flex;
    align-items: center;
    background-color: var(--bgc-white);

    .header-icon {
      font-size: .15rem;
    }

    .header-text {
      flex-grow: 1;
      font-size: .18rem;
      text-align: center;
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem;
    >div{
      background-color: var(--bgc-white);
    }

    .user-info {
      width: 100%;
      height: .36rem;
      display: flex;
      align-items: center;
      padding: .1rem 0;

      .img-box {
        width: .36rem;
        min-width: .36rem;
        height: .36rem;
        border-radius: 50%;
      }

      .author {
        flex-grow: 1;
        margin: 0 .1rem;
        color: var(--text-gray);
      }

      .time {
        font-size: .14rem;
        color: var(--text-gray);
      }
    }
    .statistics-count{
      width: 100%;
      height: .5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text-gray);
      margin-top: .05rem;
      .left{
        display: flex;
        align-items: center;
        >div{
          font-size: .2rem;
          display: flex;
          align-items: center;
          margin-right: .08rem;
          .icon{
            margin-right: .02rem;
          }
        }
      }
      .right{
        font-size: .2rem;
      }
    }
    .comment{
      width: 100%;
      .comment-title{
        width: 100%;
        padding: .2rem 0;
      }
    }
  }
}
</style>